<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 1380px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            /* overflow: hidden; */
        }
        #prev_btn,#next_btn{
            width: 60px;
            height: 60px;
            background: rgba(39, 39, 39, .7);
            display: inline-block;
            border-radius: 50%;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            position: absolute;
            top: 143px;
            left: 15px;
            z-index: 999;
            cursor: pointer;
        }
        #next_btn{
            position: absolute;
            top: 143px;
            left: 1315px;
        }
        #prev_btn img{
            margin: 7px 5px 0 0;
            width: 45px;
            height: 45px;
        }
        #next_btn img{
            margin: 7px 0 0 5px;
            width: 45px;
            height: 45px;
        }
        /* #banner_container{
            width: 600%;
        } */
        #banner_container{
            position: absolute;
            /* transition: all .5s; */
            width: 9660px;
            left: -1380px;
        }
        #banner_container li{
            list-style: none;
            float: left;
            width: 1380px;
            height: 350px;
        }
        #banner_container li img{
            width: 1380px;
            height: 350px;
        }
    </style>
</head>
<body>
    <div id="container">
        <a id="prev_btn"><img src="img/zuo-copy.png" /></a>
        <a id="next_btn"><img src="img/you-copy.png" /></a>
        <ul id="banner_container">
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // // 1. 通过点击按钮控制 index 改变;
        // // 2. 根据index改变去计算 banner_container 元素的left值;
        // // 创建一个构造函数
        // function Banner(){
        //     // 获取上一张按钮
        //     this.prev_btn = document.querySelector("#prev_btn");
        //     // 获取下一张按钮
        //     this.next_btn = document.querySelector("#next_btn");
        //     // 获取img的父元素，也就是banner的版心
        //     this.slide_container = document.querySelector("#banner_container");
        //     //  获取所有图片
        //     this.slides = document.querySelectorAll("#banner_container li");
        //     //  给实例对象创建一个index ，根据index切换图片
        //     this.index = 0;
        //     //  调用原型对象的事件绑定函数
        //     this.bindEvent();
        // }
        // // 给原型对象创建一个事件绑定的函数
        // Banner.prototype.bindEvent = function(){
        //     // 定义一个slef 好区分事件驱动函数的this
        //     var self = this;
        //     // 给左按钮添加点击切换上一张图片的事件 
        //     this.prev_btn.onclick = function(){
        //         // 如果 实例对象的index = 0 ，那么强行让index 等于img集合长度 - 1，否则 index减1 根据index切换到上一张图片
        //         if(self.index === 0){
        //             self.index = self.slides.length - 1;
        //         }else{
        //             self.index --;
        //         }
        //         //  调用原型对象里切换图片的函数
        //         self.changeSlide();
        //     }
        //     // 给右按钮创建一个点击切换到上一张图片的事件绑定函数
        //     this.next_btn.onclick = function(){
        //         // 如果index 等于 最大长度 强行等于下标 ，否则 index加一
        //         if(self.index === self.slides.length - 1){
        //             // 强行让 版心的left值等于 0 让他瞬间跳回第一张图片
        //             self.slide_container.style.left = 0;
        //             //  再点击的时候图片重第二种开始
        //             self.index = 1;
        //         }else{
        //             self.index ++;
        //         }
        //         // 调用原型对象里切换图片的函数
        //         self.changeSlide();
        //     }
        // }
        // //  在原型对象里创建一个改变图片位置的函数
        // Banner.prototype.changeSlide = function(){
        //     // this.slide_container.style.left = -this.index * 1380 + "px"
        //     // 通过jQ 动画 根据index 改变 版心的定位left值，而改变图片位置
        //     $(this.slide_container)
        //     .stop()
        //     .animate({
        //         left : -this.index * 1380
        //     },1000)
        // }
        // // new 实例函数
        // new Banner();


        // 通过注释写代码
         // 创建一个构造函数
        function Banner(){
            // 获取上一张按钮
            this.prev = document.querySelector('#prev_btn')
            // 获取下一张按钮
            this.next = document.querySelector('#next_btn')
            // 获取img的父元素，也就是banner的版心
            this.banner_container = document.querySelector('#banner_container')
            //  获取所有图片
            this.imgs = this.banner_container.querySelectorAll('li')
            //  给实例对象创建一个index ，根据index切换图片
            this.index = 1
            this.timer = null
            this.bindEvent()
            this.auto_slide()
            this.hover_shop()
            this.out_begin()
        }

            //  调用原型对象的事件绑定函数

        // 给原型对象创建一个事件绑定的函数
        Banner.prototype.bindEvent = function(){
            // 定义一个slef 好区分事件驱动函数的this
            var self = this
            // 给左按钮添加点击切换上一张图片的事件 
            this.prev.onclick = function(){
                 // 如果 实例对象的index = 0 ，那么强行让index 等于img集合长度 - 1，否则 index减1 根据index切换到上一张图片
                if(self.index === 0){
                    self.banner_container.style.left = '-6900px'
                    self.index = self.imgs.length - 3
                }else{
                    self.index--
                }
                //  调用原型对象里切换图片的函数
                self.change_slide()
            }
            // 给右按钮创建一个点击切换到上一张图片的事件绑定函数
            this.next.onclick = function(){
                
                // 如果index 等于 最大长度 强行等于下标 ，否则 index加一
                if(self.index === self.imgs.length - 1){
                    // 强行让 版心的left值等于 0 让他瞬间跳回第一张图片
                    self.banner_container.style.left = '-1380px'
                    //  再点击的时候图片重第二种开始
                    self.index = 2
                }else{
                    self.index++
                }
                // 调用原型对象里切换图片的函数
                self.change_slide()
            }
        }
        
        //  在原型对象里创建一个改变图片位置的函数
        Banner.prototype.change_slide = function(){
            $(this.banner_container).stop(true).animate({
                left : -this.index * 1380
            },1500)
        }

        Banner.prototype.auto_slide = function(){
            var self = this
            this.timer =  setInterval(function(){
                self.next.onclick()
            },1500)
        }

        Banner.prototype.hover_shop = function(){
            var self = this
            this.banner_container.onmouseover = function(){
                clearInterval(self.timer)
            }
            this.next.onmouseover = function(){
                clearInterval(self.timer)
            }
            this.prev.onmouseover = function(){
                clearInterval(self.timer)
            }
            this.banner_container.onmouseout = function(){
                self.auto_slide()
            }
        }

        // Banner.prototype.out_begin = function(){
        //     var self = this
           
        // }
        
            // this.slide_container.style.left = -this.index * 1380 + "px"
            // 通过jQ 动画 根据index 改变 版心的定位left值，而改变图片位置

        // new 实例函数
        new Banner()

    </script>
   
</body>
</html>